<template>
    <div class="qilin-user">
        <el-card>
            <QilinSearch :searchConfig.sync="searchConfig" @searchData="getTableData()">
                <template v-slot:dateRange="slotData">
                    <el-date-picker v-model="searchConfig.submitData.startTime" type="datetime"
                        placeholder="请输入开始时间" format="yyyy-MM-dd HH:mm:ss"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        placement="bottom-start"
                    ></el-date-picker>
                    <span class="search-separate">-</span>
                    <el-date-picker v-model="searchConfig.submitData.endTime" type="datetime"
                        placeholder="请输入结束时间" format="yyyy-MM-dd HH:mm:ss"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        placement="bottom-start"
                    ></el-date-picker>
                </template>
            </QilinSearch>
        </el-card>
        <el-card>
            <QilinTable :tableConfig.sync="tableConfig" @changeCurrentPage="handleCurrentPage"
                @changeCurrentSize="handleSizeChange"
            >
                <template v-slot:identify="slotData">
                    <span>{{getRole(slotData.data.scope.row.identify)}}</span>
                </template>
            </QilinTable>
        </el-card>
        <QilinDialog :dialogConfig.sync="dialogConfig" @handleClose="handleClose"
            @submitConfirm="submitData('formData')"
        >
            <QilinForm :formConfig.sync="formConfig" ref="formData"></QilinForm>
        </QilinDialog>
        <QilinDialog :dialogConfig.sync="viewDialogConfig" @handleClose="closeViewDialog">
            <QilinView :viewConfig.sync="viewConfig">
            </QilinView>
        </QilinDialog>
    </div>
</template>
<script>

import {
    getUserData,
    updateUserData
} from "@/api/message/index.js";
export default {
    data(){
        return{
            searchConfig:{
                itemConfig:[
                    {
                        labelName:"选择时间",
                        type:"slot",
                        slotName:"dateRange"
                    }
                ],
                submitData:{
                    startTime:"",
                    endTime:""
                }
            },
            tableConfig:{
                headerConfig:[
                    {
                        label:"序号",
                        type:"sortIndex",
                        width:60
                    },
                    {
                        label:"用户名",
                        prop:"name",
                        width:200
                    },
                    {
                        label:"邮箱",
                        prop:"email",
                        width:200
                    },
                    {
                        label:"角色",
                        prop:"identify",
                        type:"slot",
                        slotName:"identify"
                    },
                    {
                        label:"创建日期",
                        prop:"date",
                        type:"date",
                        ellipsis:true
                    },
                    {
                        label:"修改日期",
                        prop:"updateTime",
                        type:"date",
                        ellipsis:true
                    },
                    {
                        label:"操作",
                        type:"operate",
                        width:200,
                        operateOptions:[
                            {
                                buttonName:"查看",
                                buttonType:"primary",
                                buttonSize:"mini",
                                buttonEvent:this.viewData
                            },
                            {
                                buttonName:"修改",
                                buttonType:"warning",
                                buttonSize:"mini",
                                buttonEvent:this.updateData,
                                isDisabled:this.isDisabled
                            }
                        ]
                    }
                ],
                tableData:[],
                paginationsObj:{
                    currentPage:1, //当前页
                    pageSize:5, //当前每页数量
                    pageSizes:[5,10,15], //每页显示多少条选项集
                    total:0, //表格总数量
                    layout:"total,sizes,prev,pager,next,jumper"
                }
            },
            dialogConfig:{
                isShow:false,
                title:"修改用户信息",
                width:"400px"
            },
            formConfig:{
                itemConfig:[
                    {
                        dataName:"oldPassword",
                        labelName:"旧密码",
                        type:"input",
                        inputType:"password",
                        width:24
                    },
                    {
                        dataName:"newPassword",
                        labelName:"新密码",
                        type:"input",
                        inputType:"password",
                        width:24
                    },
                    {
                        dataName:"name",
                        labelName:"用户名",
                        type:"input",
                        inputType:"text",
                        width:24
                    }
                ],
                submitData:{
                    oldPassword:"",
                    newPassword:"",
                    name:""
                }
            },
            viewDialogConfig:{ //查看时的弹窗配置
                isShow:false,
                title:"查看用户信息"
            },
            viewConfig:{
                itemConfig:[
                    {
                        type:"text",
                        label:"用户名",
                        value:"name",
                        col:12
                    },
                    {
                        type:"text",
                        label:"邮箱",
                        value:"email",
                        valueEllipsis:true,
                        col:12
                    },
                    {
                        type:"text",
                        label:"角色",
                        value:"identify",
                        col:24
                    },
                    {
                        type:"date",
                        label:"创建日期",
                        value:"date",
                        col:24
                    },
                    {
                        type:"date",
                        label:"更新日期",
                        value:"updateTime",
                        col:24
                    }
                ],
                viewData:{
                    name:"",
                    email:"",
                    identify:"",
                    date:"",
                    updateTime:""
                }
            }
        }
    },
    computed:{
        // 格式化角色名称
        getRole(){
            return function(identify){
                if(identify === "manager"){
                    return "系统管理员";
                }else if(identify === "employee"){
                    return "普通用户";
                };
            };
        },
        userInfo(){
            return this.$store.getters.userInfo;
        }
    },
    methods:{
        // 点击查看按钮事件监听
        viewData(row){
            this.viewConfig.viewData={...row};
            this.viewConfig.viewData.identify = this.viewConfig.viewData.identify === "employee" ? "普通员工" : "系统管理员";
            this.viewDialogConfig.isShow=true;
        },
        // 点击关闭查看弹窗事件监听
        closeViewDialog(){
            this.viewDialogConfig.isShow=false;
        },
        // 点击编辑按钮事件监听
        updateData(row){
            this.dialogConfig.isShow=true;
            this.formConfig.submitData={...row};
        },
        // 判断表格按钮是否禁用事件监听
        isDisabled(row,item){
            if(this.$Qilin.Storage.getValueLocalStorage("email") === row.email){
                return false;
            }else{
                return true;
            };
        },
        // 点击弹窗确认按钮事件监听
        submitData(refName){
            this.$refs[refName].formValidate((valid)=>{
                if(valid){
                    updateUserData(this.formConfig.submitData.id,{
                        oldPassword:this.formConfig.submitData.oldPassword,
                        newPassword:this.formConfig.submitData.newPassword,
                        name:this.formConfig.submitData.name
                    }).then((res)=>{
                        if(res.code === 1000 ){
                            this.$store.dispatch("setUserInfo",{
                                ...this.userInfo,
                                name:res.data.name
                            });
                            this.$message({
                                message:res.message,
                                type:"success"
                            });
                            this.handleClose();
                            this.getTableData();
                        }else{
                            this.$message({
                                message:res.message || "系统错误",
                                type:"error"
                            });
                        };
                    });
                };
            });
        },
        // 关闭弹窗事件监听
        handleClose(){
            this.$refs["formData"].formResetFields();
            this.dialogConfig.isShow=false;
            this.currentPage=1;
        },
        //点击切换页码事件监听
        handleCurrentPage(val){
            // console.log(val);
            this.tableConfig.paginationsObj.currentPage=val;
            this.getTableData();
        },
        //点击切换每页数量事件监听
        handleSizeChange(val){
            // console.log(val);
            this.tableConfig.paginationsObj.pageSize=val;
            this.getTableData();
        },
        // 初始化获取表格内数据
        getTableData(){
            getUserData({
                pageNum:this.tableConfig.paginationsObj.currentPage,
                pageSize:this.tableConfig.paginationsObj.pageSize,
                startTime:this.searchConfig.submitData.startTime,
                endTime:this.searchConfig.submitData.endTime
            }).then((res)=>{
                if(res.code===1000){
                    this.tableConfig.tableData=res.data.data;
                    this.tableConfig.paginationsObj.total=res.data.total;
                };
            });
        }
    },
    mounted(){
        this.getTableData();
    }
}
</script>
<style lang="less" scoped>
.qilin-user{
    width:100%;
    padding:0 10px 40px;
    .qilin-QilinSearch{
        .el-form{
            .search-separate{
                margin:0 10px;
            }
        }
    }
}
</style>